<template>
  <div class="channel-goods bg-f8">
    <van-search class="search" placeholder="商品名称" v-model="params.search_text" @blur="onSearch" />
    <div class="category-view">
      <div class="category" :class="goodsViewHeight">
        <div class="nav">
          <div
            class="item"
            v-for="(item,index) in category_list"
            :key="index"
            :class="activeKey == index ? 'active' : ''"
            @click="onChangeNav(index)"
          >
            <span>{{item.short_name ? item.short_name : item.category_name}}</span>
          </div>
        </div>
        <div class="content">
          <List
            v-model="loading"
            :finished="finished"
            :error.sync="error"
            :is-empty="isListEmpty"
            :empty="{message: '没有相关商品'}"
            @load="loadList"
          >
            <GoodsPanelGroup v-for="(item,index) in list" :key="index" :detail="item" />
          </List>
        </div>
      </div>
    </div>
    <GoodsSubmitBar ref="goodsCart" />
  </div>
</template>

<script>
import sfc from "@/utils/create";
import { Search } from "vant";
import GoodsPanelGroup from "./component/GoodsPanelGroup";
import GoodsSubmitBar from "./component/GoodsSubmitBar";
import { GET_GOODSCATEGORY, GET_GOODSLIST } from "@/api/channel";
import { isEmpty } from "@/utils/util";
import { list } from "@/mixins";
export default sfc({
  name: "channel-goods",
  data() {
    const buy_type = this.$route.params.type;
    return {
      activeKey: 0,
      buy_type,
      category_list: [],
      params: {
        category_id: "",
        buy_type,
        search_text: ""
      }
    };
  },
  mixins: [list],
  watch: {
    "$route.params.type": function(type, o) {
      if (
        this.$route.name == "channel-goods" &&
        type &&
        this.buy_type !== type
      ) {
        this.activeKey = 0;
        this.buy_type = type;
        this.params.buy_type = type;
        this.params.search_text = "";
        this.category_list = [];
        this.loadData("init");
        this.$refs.goodsCart.getCartList();
      }
    }
  },
  computed: {
    goodsViewHeight() {
      // 采购情况需要显示最小采购金额
      if (this.$route.params.type == "purchase") {
        return this.$store.state.channel.isAchieveCondie
          ? "no-message"
          : "has-message";
      } else {
        return "no-message";
      }
    }
  },
  mounted() {
    this.loadData();
  },
  methods: {
    onChangeNav(index) {
      this.activeKey = index;
      this.params.category_id = this.category_list[index].category_id;
      this.loadList("init");
    },
    onSearch() {
      this.loadList("init");
    },
    getCategory() {
      const $this = this;
      return new Promise((resolve, reject) => {
        GET_GOODSCATEGORY($this.buy_type)
          .then(({ data }) => {
            $this.category_list = data.category_list;
            resolve();
          })
          .catch(() => {});
      });
    },
    loadList(init) {
      const $this = this;
      if (init && init === "init") {
        $this.initList();
      }
      GET_GOODSLIST($this.params)
        .then(({ data }) => {
          let list = data.goods_list ? data.goods_list : [];
          $this.pushToList(list, data.page_count, init);
        })
        .catch(() => {
          $this.loadError();
        });
    },
    loadData(init) {
      const $this = this;
      if (isEmpty($this.category_list)) {
        $this.getCategory().then(() => {
          $this.params.category_id = $this.category_list[$this.activeKey]
            ? $this.category_list[$this.activeKey].category_id
            : "";
          $this.loadList(init);
        });
      } else {
        $this.params.category_id = $this.category_list[$this.activeKey]
          ? $this.category_list[$this.activeKey].category_id
          : "";
        $this.loadList(init);
      }
    }
  },
  components: {
    GoodsPanelGroup,
    GoodsSubmitBar,
    [Search.name]: Search
  }
});
</script>
<style scoped>
.search {
  height: 46px;
  border-bottom: 1px solid #f5f5f5;
  background-color: #fff !important;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
}

.search >>> .van-cell {
  padding: 3px 10px;
  border-radius: 2px;
  background: #f5f5f5;
}

.category {
  display: flex;
  padding-top: 46px;
  padding-left: 90px;
  min-height: 100%;
  position: absolute;
  width: 100%;
}

.category .nav {
  z-index: 100;
  width: 90px;
  position: fixed;
  left: 0;
  top: 46px;
  background: #f8f8f8;
  overflow-y: auto;
}

.no-message {
  padding-bottom: 50px;
}

.has-message {
  padding-bottom: 90px;
}

.no-message .nav {
  bottom: 50px;
}

.has-message .nav {
  bottom: 90px;
}

.category .nav .item {
  color: #333;
  display: flex;
  align-items: center;
  height: 46px;
  justify-content: center;
}

.category .nav .item.active {
  color: #ff454e;
  background: #fff;
}

.category .content {
  background-color: #fff;
  flex: 1;
  position: relative;
}
</style>
